import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Browser, BrowserHrm, Upload } from 'weaver-mobile-page'
import { Tools, TextareaItem, Icon, Select, Accordion, List, InputItem, DatePicker, Modal, Toast, Button, Tabs, Popover, Switch, Bubble } from 'weaver-mobile';
import { toJS } from 'mobx';
import * as Util from "../../../util";
const { FormItem } = List;
const { DatePickerInput } = DatePicker;
const getLabel = Tools.getLabel;
@inject('goalDetailStore', 'goalCommonStore')
@withRouter
@observer
class GoalBaseInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            options: {
                status: [
                    {
                        key: "1",
                        selected: true,
                        showname: getLabel(1960, '进行中'),
                    },
                    {
                        key: "2",
                        selected: false,
                        showname: getLabel(23774, '已完成')
                    },
                    {
                        key: "3",
                        selected: false,
                        showname: getLabel(1981, '已撤销')
                    },
                ],
                period: [
                    {
                        key: "",
                        showname: ""
                    },
                    {
                        key: "1",
                        selected: true,
                        showname: getLabel(19398, '月度')
                    },
                    {
                        key: "2",
                        selected: false,
                        showname: getLabel(17495, '季度')
                    },
                    {
                        key: "3",
                        selected: false,
                        showname: getLabel(17138, '年度')
                    },
                    {
                        key: "4",
                        selected: false,
                        showname: getLabel(390757, '三年')
                    },
                    {
                        key: "5",
                        selected: false,
                        showname: getLabel(390758, '五年')
                    },
                ]
            }
        }
    }

    componentWillMount() {
        // const {goalId} = this.props;
        // const {getDetailView} = this.props.goalDetailStore;
        // let goalId = Util.getParams("id");
        // let goalId = 11148

    }

    /**
 * 更新输入框的值
 */
    onInputChange = (value, type) => {
        const { setValue } = this.props.goalDetailStore;
        // if(type == "showorder"){
        //     if(!parseInt(value)==value){
        //         return;
        //     }
        // }
        if (type == 'period') {
            setValue(this.computeEndDate(value), "enddate", "input");
        }
        setValue(value, type, "input");
    }

    onBlurChange = (value, type) => {
        const { setValue } = this.props.goalDetailStore;
        if (type == "target" || type == "result" || type == "showorder") {
            if (value == "") {
                return;
            }
            if (!this.isNumber(value)) {
                Bubble.warning(getLabel(508795, '请输入数字'), 1)
                setValue("", type, "input");
            }

            if (value >= 100000000) {
                Bubble.warning(getLabel(513087, '请输入小于1亿的数字，且只能保留两位小数'), 1)
                setValue("", type, "input");
            }
            if (value.indexOf(".") != -1) {
                value = parseFloat(value).toFixed(2);
                setValue(value, type, "input");
            }
        }
    }

    /**
 * 判断是否为数字
 */
    isNumber = (val) => {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if (regPos.test(val) || regNeg.test(val)) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 更新浏览按钮的值
     */
    onChangeBrowser = (datas, type) => {
        const { setValue } = this.props.goalDetailStore;
        if (type == "principalid" && datas.length == 0) {
            Bubble.warning(getLabel('508801', '责任人不能为空'), 1)
            return;
        } else {
            setValue(toJS(datas), type, "browser");
        }
    }

    //单独处理标签的更改
    onTagSave = (datas, type) => {
        const { judgeIsCanSave, detailData, editGoalField, goalId, setValue, getDetailView,tagArray } = this.props.goalDetailStore

        let arr = toJS(datas);
        // let flag = judgeIsCanSave(arr,detailData.tagArray);

        let newIdsStr = "," + arr.sort((a, b) => parseInt(a.id) - parseInt(b.id)).map((d, i) => d.id + "").join(",") + ","
        let oldIdsStr = "," + detailData.tagArray.sort((a, b) => parseInt(a.id) - parseInt(b.id)).map((d, i) => d.id).join(",") + ","
        let delValue = Util.ArrayDiffer(oldIdsStr, newIdsStr, 1)
        let addValue = Util.ArrayDiffer(oldIdsStr, newIdsStr.split(","), 2)
        if (newIdsStr !== oldIdsStr) {
            editGoalField({
                goalId: goalId,
                fieldname: "tag",
                fieldvalue: newIdsStr,
                fieldtype: "str",
                logAddValue: addValue,
                logDelvalue: delValue,
                tagtype: "2",
                doback: () => {
                }
            })
        }
    }



    computeEndDate = (values) => {
        let date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth();
        let result = "";
        if (values == "1") {
            result = Util.convertTimeToString(new Date(y, m + 1, 0))
        } else if (values == "2") {
            result = Util.convertTimeToString(new Date(y, m + 4, 0))
        } else if (values == "3") {
            result = Util.convertTimeToString(new Date(y + 1, 0, 0))
        } else if (values == "4") {
            result = Util.convertTimeToString(new Date(y + 4, 0, 0))
        } else if (values == "5") {
            result = Util.convertTimeToString(new Date(y + 6, 0, 0))
        }
        return result;
    }

    resetAmListCss = (ref) => {
        ref.classList.add("workrelate-mobile-am-list-no-extra")
        ref.classList.add("workrelate-mobile-am-picker-no-padding")
        ref.classList.add("workrelate-condition-right")
    }

    render() {
        const { goalCommonStore } = this.props;
        const { detailData, cateList, getBrowserStore, saveValue, supGoalArray, principalArray, partArray, shareArray, tagArray, setState, canedit, goalId, loading, tagBrowser } = this.props.goalDetailStore;
        let { isOrgGoal } = goalCommonStore;
        if(!isOrgGoal){
            isOrgGoal = this.props.goalDetailStore.isOrgGoal;
        }
        const { options } = this.state;
        if (loading) {
            goalCommonStore.showLoading()
        } else {
            goalCommonStore.closeLoading()
        }
        // console.log(1111111111)
        return (
            <div key={loading} className="baseinfo-wrapper workrelate-condition workrelate-goal-task-condition" ref={ref => { ref && !canedit && this.resetAmListCss(ref) }}>
                <div className="goal-content-wrapper">
                    <List >
                        <FormItem
                            required={detailData.name ? false : true}
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel('33439', '名称')}
                            line
                            noBorder
                            content={
                                <TextareaItem key={loading}
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    autoHeight
                                    value={detailData.name}
                                    onChange={v => { this.onInputChange(v, "name") }}
                                />
                            }
                        />
                    </List>
                    <List className={canedit ? "" : "workrelate-am-list-no-arrow"}>
                        <Browser
                            placeholder={canedit ? "" : <span>&nbsp;</span>}
                            label={getLabel(19709, '上级目标')}
                            store={getBrowserStore("supGoal")}
                            hasAdvanceSerach
                            type="wrlgoal"
                            dataParams={{ parentid: goalId }}
                            valueArray={supGoalArray}
                            viewAttr={canedit ? 2 : 1}
                            onChange={(...arg) => {
                                this.onChangeBrowser(arg[2], "parentid")
                                setState({ supGoalArray: arg[2] });
                            }}
                        />
                    </List>
                    <List>
                        <FormItem
                            noBorder
                            content={
                                <Select
                                    autoHeight
                                    options={cateList}
                                    label={getLabel(500401, '类型')}
                                    viewAttr={canedit ? 2 : 1}
                                    value={detailData.cateid}
                                    onChange={(key, showname) =>
                                        this.onInputChange(key, "cateid")
                                    }
                                />}
                        />
                    </List>
                    <List>
                        <FormItem
                            noBorder
                            content={
                                <Select
                                    options={options.status}
                                    label={getLabel(23247, '状态')}
                                    viewAttr={canedit ? 2 : 1}
                                    value={detailData.status}
                                    onChange={(key, showname) =>
                                        this.onInputChange(key, "status")
                                    }
                                />}
                        />
                    </List>
                    <List >
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            placeholder={canedit ? getLabel(83869, '请输入') : ""}
                            label={getLabel(433, '描述')}
                            line
                            content={
                                <TextareaItem key={loading}
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.remark}
                                    onChange={v => { this.onInputChange(v, "remark") }}
                                    autoHeight
                                />
                            }
                        />
                    </List>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(18087, '目标值')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.target}
                                    onChange={v => this.onInputChange(v, "target")}
                                    onBlur={v => { this.onBlurChange(v, "target") }}
                                />
                            }
                        />
                    </List>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(18087, '目标值') + getLabel(1329, '单位')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.tunit}
                                    onChange={v => this.onInputChange(v, "tunit")}
                                />
                            }
                        />
                    </List>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(508618, '完成值')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.result}
                                    onChange={v => this.onInputChange(v, "result")}
                                    onBlur={v => { this.onBlurChange(v, "result") }}
                                />
                            }
                        />
                    </List>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(508618, '完成值') + getLabel(1329, '单位')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.runit}
                                    onChange={v => this.onInputChange(v, "runit")}
                                />
                            }
                        />
                    </List>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(30447, '完成率')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.rate}
                                    onChange={v => this.onInputChange(v, "rate")}
                                />
                            }
                        />
                    </List>
                    <List className={detailData.caneditPrincial ? "" : "workrelate-am-list-no-arrow"}>
                        <BrowserHrm
                            placeholder={detailData.caneditPrincial ? "" : <span>&nbsp;</span>}
                            label={getLabel(16936, '责任人')}
                            store={getBrowserStore("principal")}
                            hasAdvanceSerach
                            isSingle={true}
                            type={1}
                            valueArray={principalArray}
                            viewAttr={ detailData.caneditPrincial ? 2 : 1}
                            onChange={(...arg) => {
                                this.onChangeBrowser(arg[2], "principalid")
                                // setState({ principalArray: arg[2]});
                            }}
                        />
                    </List>
                    <List className={canedit ? "" : "workrelate-am-list-no-arrow"}>
                        <BrowserHrm
                            placeholder={canedit ? "" : <span>&nbsp;</span>}
                            label={getLabel(15761, '参与人')}
                            store={getBrowserStore("part")}
                            hasAdvanceSerach
                            isSingle={false}
                            type={1}
                            valueArray={partArray}
                            viewAttr={canedit ? 2 : 1}
                            onChange={(...arg) => {
                                this.onChangeBrowser(arg[2], "partnerid")
                                // setState({ partArray: arg[2]});
                            }}
                        />
                    </List>
                    {!isOrgGoal && <List className={canedit ? "" : "workrelate-am-list-no-arrow"}>
                        <BrowserHrm
                            placeholder={canedit ? "" : <span>&nbsp;</span>}
                            label={getLabel(382597, '分享给')}
                            store={getBrowserStore("share")}
                            hasAdvanceSerach
                            isSingle={false}
                            type={1}
                            valueArray={shareArray}
                            viewAttr={canedit ? 2 : 1}
                            onChange={(...arg) => {
                                this.onChangeBrowser(arg[2], "sharerid")
                                // setState({ shareArray: arg[2]});
                            }}
                        />
                    </List>}
                    <List>
                        <FormItem
                            noBorder
                            content={
                                <Select
                                    options={options.period}
                                    label={getLabel(15386, '周期')}
                                    viewAttr={canedit ? 2 : 1}
                                    value={detailData.period}
                                    onChange={(key, showname) =>
                                        this.onInputChange(key, "period")
                                    }
                                />}
                        />
                    </List>
                    <List>
                        <FormItem
                            label={getLabel(741, '结束日期')}
                            line
                            content={(<DatePickerInput
                                placeholder={getLabel(83869, '请输入')}
                                mode={"date"}
                                value={detailData.enddate}
                                disabled={!canedit}
                                onChange={v => this.onInputChange(v, "enddate")}
                            />)}
                        />
                    </List>
                    <List className="workrelate-am-list-arrow-center workrelate-am-list-has-extra" key={new Date().getTime() + "tag"} >
                        <FormItem
                            className="right-arrow"
                            extra={
                                <div onClick={() => {
                                    this.props.history.push(tagBrowser.path)
                                }}>
                                    <Icon type="right" />
                                </div>
                            }
                            label={getLabel(30884, '标签设置')}
                            line
                            noBorder
                            content={
                                <div
                                    className="tag-content-wrapper"
                                    onClick={() => {
                                        this.props.history.push(tagBrowser.path)
                                    }}
                                    ref={ref => {
                                        if (ref) {
                                            ref.parentNode.style.height = ref.clientHeight + "px"
                                        }
                                    }}
                                >
                                    {
                                        tagArray && tagArray.length > 0 && tagArray.map((d, i) => {
                                            return (
                                                <div
                                                    className="content-wrapper"
                                                    style={{ background: d.color }}
                                                >
                                                     <div className="text" style={{ background: d.color || "green" }}>
                                                        {d.name}
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                    {
                                        tagArray && tagArray.length === 0 &&
                                        <div className="tag-placeholder-wrapper">
                                            {"请输入"}
                                        </div>
                                    }
                                </div>
                            }
                        />
                    </List>
                    <div style={{ display: "none" }}>
                        <Browser
                            store={getBrowserStore("tag")}
                            // placeholder={<span>&nbsp;</span>}
                            // dataURL={element.browscompurl ? element.browscompurl : "/api/public/browser/data/"}
                            label={getLabel(30884, '标签设置')}
                            isSingle={false}
                            type={"wrltag"}
                            hasAdvanceSerach
                            onChange={(...arg) => {
                                // console.log(toJS(arg[2]))
                                this.onChangeBrowser(arg[2], "tag")
                                if (!canedit) {
                                    this.onTagSave(arg[2],"tag")
                                }
                            }}
                            valueArray={tagArray}
                            viewAttr={2}
                        />
                    </div>
                    <List>
                        <FormItem
                            extra={canedit && <Icon size='xxs' type="editor" />}
                            label={getLabel(338, '排序')}
                            line
                            content={
                                <InputItem
                                    placeholder={canedit ? getLabel(83869, '请输入') : ""}
                                    editable={canedit}
                                    value={detailData.showorder}
                                    onChange={v => this.onInputChange(v, "showorder")}
                                    onBlur={v => { this.onBlurChange(v, "showorder") }}
                                />
                            }
                        />
                    </List>
                </div>
                {canedit && <div className="save-btn-wrapper">
                    <Button type="primary" onClick={saveValue}>{getLabel(86, '保存')}</Button>
                </div>}
            </div>
        )
    }

}

export default GoalBaseInfo; 